<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 9 The Full Monty - Gio.js | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.19 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 9 The Full Monty - Gio.js | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="yihui/bookdown-crc" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 9 The Full Monty - Gio.js | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2020-06-13" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="a-realistic-widget-typed-js.html"/>
<link rel="next" href="advanced-usage.html"/>
<script src="libs/header-attrs/header-attrs.js"></script>
<script src="libs/jquery/jquery.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<script src="libs/plotly-binding/plotly.js"></script>
<script src="libs/typedarray/typedarray.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main/plotly-latest.min.js"></script>
<script src="libs/core-js/shim.min.js"></script>
<script src="libs/react/react.min.js"></script>
<script src="libs/react/react-dom.min.js"></script>
<script src="libs/reactwidget/react-tools.js"></script>
<script src="libs/reactable-binding/reactable.js"></script>
<script src="libs/r2d3-render/r2d3-render.js"></script>
<script src="libs/webcomponents/webcomponents.js"></script>
<script src="libs/r2d3-binding/r2d3.js"></script>
<script src="libs/d3v5/d3.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">R and JavaScript</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a>
<ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#disclaimer"><i class="fa fa-check"></i>Disclaimer</a></li>
</ul></li>
<li class="part"><span><b>I Basics &amp; Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#rationale"><i class="fa fa-check"></i>Rationale</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#prerequisites"><i class="fa fa-check"></i>Prerequisites</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#package-development"><i class="fa fa-check"></i>Package Development</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#json"><i class="fa fa-check"></i>JSON</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#javascript"><i class="fa fa-check"></i>JavaScript</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#methods"><i class="fa fa-check"></i>Methods</a>
<ul>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#v8"><i class="fa fa-check"></i>V8</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#htmlwidgets"><i class="fa fa-check"></i>htmlwidgets</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#shiny"><i class="fa fa-check"></i>Shiny</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#reactr"><i class="fa fa-check"></i>reactR</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#bubble"><i class="fa fa-check"></i>bubble</a></li>
<li class="chapter" data-level="" data-path="introduction.html"><a href="introduction.html#r2d3"><i class="fa fa-check"></i>r2d3</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II JavaScript for Computations</b></span></li>
<li class="chapter" data-level="2" data-path="the-v8-engine.html"><a href="the-v8-engine.html"><i class="fa fa-check"></i><b>2</b> The V8 Engine</a>
<ul>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#installation"><i class="fa fa-check"></i>Installation</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#basics"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#external-libraries"><i class="fa fa-check"></i>External Libraries</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#with-npm"><i class="fa fa-check"></i>With Npm</a></li>
<li class="chapter" data-level="" data-path="the-v8-engine.html"><a href="the-v8-engine.html#use-in-packages"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="node.html"><a href="node.html"><i class="fa fa-check"></i><b>3</b> Node.js with Bubble</a>
<ul>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#basics-1"><i class="fa fa-check"></i>Basics</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#r-markdown-engine"><i class="fa fa-check"></i>R Markdown Engine</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#npm"><i class="fa fa-check"></i>Npm</a></li>
<li class="chapter" data-level="" data-path="node.html"><a href="node.html#use-in-packages-1"><i class="fa fa-check"></i>Use in Packages</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="4" data-path="introduction-1.html"><a href="introduction-1.html"><i class="fa fa-check"></i><b>4</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#static-files"><i class="fa fa-check"></i>Static Files</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#example---alerts"><i class="fa fa-check"></i>Example - Alerts</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#from-r-to-javascript"><i class="fa fa-check"></i>From R to JavaScript</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#from-javascript-to-r"><i class="fa fa-check"></i>From JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="introduction-1.html"><a href="introduction-1.html#deserialise"><i class="fa fa-check"></i>Deserialise</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html"><i class="fa fa-check"></i><b>5</b> A Complete Integration - jBox.js</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#serialisation"><i class="fa fa-check"></i>Serialisation</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#events-callbacks"><i class="fa fa-check"></i>Events &amp; Callbacks</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#as-a-package"><i class="fa fa-check"></i>As a Package</a>
<ul>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#dependencies"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#r-code"><i class="fa fa-check"></i>R Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#javascript-code"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#input-handler"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#wrapping-up"><i class="fa fa-check"></i>Wrapping up</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="a-complete-integration-jbox-js.html"><a href="a-complete-integration-jbox-js.html#exercises"><i class="fa fa-check"></i>Exercises</a></li>
</ul></li>
<li class="part"><span><b>IV Data Visualisation</b></span></li>
<li class="chapter" data-level="6" data-path="introduction-2.html"><a href="introduction-2.html"><i class="fa fa-check"></i><b>6</b> Introduction</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#candidate-libraries"><i class="fa fa-check"></i>Candidate Libraries</a>
<ul>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#plotly"><i class="fa fa-check"></i>Plotly</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#highchart.js"><i class="fa fa-check"></i>Highchart.js</a></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#chart.js"><i class="fa fa-check"></i>Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="introduction-2.html"><a href="introduction-2.html#how-it-works"><i class="fa fa-check"></i>How it works</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="your-first-widget.html"><a href="your-first-widget.html"><i class="fa fa-check"></i><b>7</b> Your First Widget</a>
<ul>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#the-scaffold"><i class="fa fa-check"></i>The Scaffold</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#the-output"><i class="fa fa-check"></i>The Output</a></li>
<li class="chapter" data-level="" data-path="your-first-widget.html"><a href="your-first-widget.html#javascript-side"><i class="fa fa-check"></i>JavaScript-side</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html"><i class="fa fa-check"></i><b>8</b> A Realistic Widget - Typed.js</a>
<ul>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#dependency"><i class="fa fa-check"></i>Dependency</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#javascript-1"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="a-realistic-widget-typed-js.html"><a href="a-realistic-widget-typed-js.html#html-element"><i class="fa fa-check"></i>HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html"><i class="fa fa-check"></i><b>9</b> The Full Monty - Gio.js</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#dependencies-1"><i class="fa fa-check"></i>Dependencies</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#javascript-2"><i class="fa fa-check"></i>JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#working-with-data"><i class="fa fa-check"></i>Working with Data</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#transforming-data"><i class="fa fa-check"></i>Transforming Data</a>
<ul>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#in-javascript"><i class="fa fa-check"></i>In JavaScript</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#in-r"><i class="fa fa-check"></i>In R</a></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#pros-cons"><i class="fa fa-check"></i>Pros &amp; Cons</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="the-full-monty-gio-js.html"><a href="the-full-monty-gio-js.html#on-print"><i class="fa fa-check"></i>On Print</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="advanced-usage.html"><a href="advanced-usage.html"><i class="fa fa-check"></i><b>10</b> Advanced Usage</a>
<ul>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#shared-variables"><i class="fa fa-check"></i>Shared Variables</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#sizing"><i class="fa fa-check"></i>Sizing</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#sizing-policy"><i class="fa fa-check"></i>Sizing Policy</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#resizing"><i class="fa fa-check"></i>Resizing</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#pre-render-hooks-safety"><i class="fa fa-check"></i>Pre Render Hooks &amp; Safety</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#javascript-code-1"><i class="fa fa-check"></i>JavaScript Code</a></li>
<li class="chapter" data-level="" data-path="advanced-usage.html"><a href="advanced-usage.html#prepend-append-content"><i class="fa fa-check"></i>Prepend &amp; Append Content</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="working-with-shiny.html"><a href="working-with-shiny.html"><i class="fa fa-check"></i><b>11</b> Working with Shiny</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#javascript-to-r"><i class="fa fa-check"></i>JavaScript to R</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#input-handler-1"><i class="fa fa-check"></i>Input Handler</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#r-to-javascript"><i class="fa fa-check"></i>R to JavaScript</a>
<ul>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#send-data"><i class="fa fa-check"></i>Send Data</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#retrieve-widget-instance"><i class="fa fa-check"></i>Retrieve Widget Instance</a></li>
<li class="chapter" data-level="" data-path="working-with-shiny.html"><a href="working-with-shiny.html#handle-data"><i class="fa fa-check"></i>Handle Data</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="for-the-curious.html"><a href="for-the-curious.html"><i class="fa fa-check"></i><b>12</b> For The Curious</a></li>
<li class="part"><span><b>V Examples</b></span></li>
<li class="chapter" data-level="13" data-path="ploty.html"><a href="ploty.html"><i class="fa fa-check"></i><b>13</b> Ploty</a></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="the-full-monty---gio.js" class="section level1" number="9">
<h1><span class="header-section-number">Chapter 9</span> The Full Monty - Gio.js</h1>
<p>With a first widget built one can jump onto another one: <a href="https://giojs.org/">gio.js</a>, a library to draw arcs between countries on a 3 dimensional globe. This will include many more functionalities such packages can comprise.</p>
<div class="figure">
<img src="images/gio-example.png" alt="" />
<p class="caption">Example of Gio.js visualisation</p>
</div>
<p>Then again, the first order of business when looking to integrate a library is to look at the documentation to understand what is should be reproduced in R.</p>
<div class="sourceCode" id="cb215"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb215-1"><a href="the-full-monty-gio-js.html#cb215-1"></a><span class="dt">&lt;!DOCTYPE </span>html<span class="dt">&gt;</span></span>
<span id="cb215-2"><a href="the-full-monty-gio-js.html#cb215-2"></a><span class="kw">&lt;html</span><span class="ot"> xmlns=</span><span class="st">&quot;http://www.w3.org/1999/xhtml&quot;</span><span class="ot"> lang=</span><span class="st">&quot;&quot;</span><span class="ot"> xml:lang=</span><span class="st">&quot;&quot;</span><span class="kw">&gt;</span></span>
<span id="cb215-3"><a href="the-full-monty-gio-js.html#cb215-3"></a></span>
<span id="cb215-4"><a href="the-full-monty-gio-js.html#cb215-4"></a><span class="kw">&lt;head&gt;</span></span>
<span id="cb215-5"><a href="the-full-monty-gio-js.html#cb215-5"></a>  <span class="co">&lt;!-- Import libraries --&gt;</span></span>
<span id="cb215-6"><a href="the-full-monty-gio-js.html#cb215-6"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;three.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb215-7"><a href="the-full-monty-gio-js.html#cb215-7"></a>  <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;gio.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></span>
<span id="cb215-8"><a href="the-full-monty-gio-js.html#cb215-8"></a><span class="kw">&lt;/head&gt;</span></span>
<span id="cb215-9"><a href="the-full-monty-gio-js.html#cb215-9"></a></span>
<span id="cb215-10"><a href="the-full-monty-gio-js.html#cb215-10"></a><span class="kw">&lt;body&gt;</span></span>
<span id="cb215-11"><a href="the-full-monty-gio-js.html#cb215-11"></a>  <span class="co">&lt;!-- div to hold visualisation --&gt;</span></span>
<span id="cb215-12"><a href="the-full-monty-gio-js.html#cb215-12"></a>  <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;globe&quot;</span><span class="ot"> style=</span><span class="st">&quot;width: 200px; height: 200px&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></span>
<span id="cb215-13"><a href="the-full-monty-gio-js.html#cb215-13"></a></span>
<span id="cb215-14"><a href="the-full-monty-gio-js.html#cb215-14"></a>  <span class="co">&lt;!-- Script to create visualsiation --&gt;</span></span>
<span id="cb215-15"><a href="the-full-monty-gio-js.html#cb215-15"></a>  <span class="kw">&lt;script&gt;</span></span>
<span id="cb215-16"><a href="the-full-monty-gio-js.html#cb215-16"></a>    <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb215-17"><a href="the-full-monty-gio-js.html#cb215-17"></a>    <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb215-18"><a href="the-full-monty-gio-js.html#cb215-18"></a>    <span class="va">controller</span>.<span class="at">addData</span>(data)<span class="op">;</span></span>
<span id="cb215-19"><a href="the-full-monty-gio-js.html#cb215-19"></a>    <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb215-20"><a href="the-full-monty-gio-js.html#cb215-20"></a>  <span class="kw">&lt;/script&gt;</span></span>
<span id="cb215-21"><a href="the-full-monty-gio-js.html#cb215-21"></a><span class="kw">&lt;/body&gt;</span></span>
<span id="cb215-22"><a href="the-full-monty-gio-js.html#cb215-22"></a></span>
<span id="cb215-23"><a href="the-full-monty-gio-js.html#cb215-23"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
<p>Gio.js has itself a dependency, <a href="https://threejs.org/">three.js</a>, which needs to be imported before gio.js, other than that not much differs from libraries previously explored in this chapter.</p>
<div class="sourceCode" id="cb216"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb216-1"><a href="the-full-monty-gio-js.html#cb216-1"></a>usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;gio&quot;</span>)</span>
<span id="cb216-2"><a href="the-full-monty-gio-js.html#cb216-2"></a>htmlwidgets<span class="op">::</span><span class="kw">scaffoldWidget</span>(<span class="st">&quot;gio&quot;</span>)</span></code></pre></div>
<div id="dependencies-1" class="section level2 unnumbered" number="">
<h2>Dependencies</h2>
<p>Handling the dependencies does differ much, we only need to download two libraries instead of one.</p>
<div class="sourceCode" id="cb217"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb217-1"><a href="the-full-monty-gio-js.html#cb217-1"></a><span class="co"># create directories for JS dependencies</span></span>
<span id="cb217-2"><a href="the-full-monty-gio-js.html#cb217-2"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/three&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb217-3"><a href="the-full-monty-gio-js.html#cb217-3"></a><span class="kw">dir.create</span>(<span class="st">&quot;./inst/htmlwidgets/gio&quot;</span>, <span class="dt">recursive =</span> <span class="ot">TRUE</span>)</span>
<span id="cb217-4"><a href="the-full-monty-gio-js.html#cb217-4"></a></span>
<span id="cb217-5"><a href="the-full-monty-gio-js.html#cb217-5"></a><span class="co"># download JS dependencies</span></span>
<span id="cb217-6"><a href="the-full-monty-gio-js.html#cb217-6"></a>three &lt;-<span class="st"> &quot;https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js&quot;</span></span>
<span id="cb217-7"><a href="the-full-monty-gio-js.html#cb217-7"></a>gio &lt;-<span class="st"> &quot;https://raw.githubusercontent.com/syt123450/giojs/master/build/gio.min.js&quot;</span></span>
<span id="cb217-8"><a href="the-full-monty-gio-js.html#cb217-8"></a></span>
<span id="cb217-9"><a href="the-full-monty-gio-js.html#cb217-9"></a><span class="kw">download.file</span>(three, <span class="st">&quot;./inst/htmlwidgets/three/three.min.js&quot;</span>)</span>
<span id="cb217-10"><a href="the-full-monty-gio-js.html#cb217-10"></a><span class="kw">download.file</span>(gio, <span class="st">&quot;./inst/htmlwidgets/gio/gio.min.js&quot;</span>)</span></code></pre></div>
<p>This should produce the following working directory.</p>
<pre><code>.
├── DESCRIPTION
├── NAMESPACE
├── R
│   └── gio.R
└── inst
    └── htmlwidgets
        ├── gio
        │   └── gio.min.js
        ├── gio.js
        ├── gio.yaml
        └── three
            └── three.min.js</code></pre>
<p>The libraries have been downloaded but the <code>gio.yml</code> file is yet to be edited. The order in which the libraries are listed matters; just as in HTML three.js needs to precede gio.js as the former depends on the latter and not vice versa.</p>
<div class="sourceCode" id="cb219"><pre class="sourceCode yml"><code class="sourceCode yaml"><span id="cb219-1"><a href="the-full-monty-gio-js.html#cb219-1"></a><span class="fu">dependencies</span><span class="kw">:</span></span>
<span id="cb219-2"><a href="the-full-monty-gio-js.html#cb219-2"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> three</span></span>
<span id="cb219-3"><a href="the-full-monty-gio-js.html#cb219-3"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="dv">110</span></span>
<span id="cb219-4"><a href="the-full-monty-gio-js.html#cb219-4"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/three</span></span>
<span id="cb219-5"><a href="the-full-monty-gio-js.html#cb219-5"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> three.min.js</span></span>
<span id="cb219-6"><a href="the-full-monty-gio-js.html#cb219-6"></a><span class="at">  </span><span class="kw">-</span><span class="at"> </span><span class="fu">name</span><span class="kw">:</span><span class="at"> gio</span></span>
<span id="cb219-7"><a href="the-full-monty-gio-js.html#cb219-7"></a><span class="at">    </span><span class="fu">version</span><span class="kw">:</span><span class="at"> </span><span class="fl">2.0</span></span>
<span id="cb219-8"><a href="the-full-monty-gio-js.html#cb219-8"></a><span class="at">    </span><span class="fu">src</span><span class="kw">:</span><span class="at"> htmlwidgets/gio</span></span>
<span id="cb219-9"><a href="the-full-monty-gio-js.html#cb219-9"></a><span class="at">    </span><span class="fu">script</span><span class="kw">:</span><span class="at"> gio.min.js</span></span></code></pre></div>
</div>
<div id="javascript-2" class="section level2 unnumbered" number="">
<h2>JavaScript</h2>
<p>Let’s copy the JavaScript code from the <a href="https://giojs.org/index.html">Get Started section of gio.js</a> in the <code>gio.js</code> file’s <code>renderValue</code> function. At this point the data format is not known so we comment the line which adds data to the visualisation.</p>
<div class="sourceCode" id="cb220"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb220-1"><a href="the-full-monty-gio-js.html#cb220-1"></a>...</span>
<span id="cb220-2"><a href="the-full-monty-gio-js.html#cb220-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb220-3"><a href="the-full-monty-gio-js.html#cb220-3"></a></span>
<span id="cb220-4"><a href="the-full-monty-gio-js.html#cb220-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;globe&quot;</span>)<span class="op">;</span></span>
<span id="cb220-5"><a href="the-full-monty-gio-js.html#cb220-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb220-6"><a href="the-full-monty-gio-js.html#cb220-6"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb220-7"><a href="the-full-monty-gio-js.html#cb220-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb220-8"><a href="the-full-monty-gio-js.html#cb220-8"></a></span>
<span id="cb220-9"><a href="the-full-monty-gio-js.html#cb220-9"></a><span class="op">}</span></span>
<span id="cb220-10"><a href="the-full-monty-gio-js.html#cb220-10"></a>...</span></code></pre></div>
<p>One can document and load the package build it likely will not work as the code above attempts to place the visualisation in a <code>div</code> with <code>id = "globe"</code>. As for the previously written widget, this needs to be changed to <code>el.id</code> so the visualisation can correctly render in the HTML element generated by the widget.</p>
<div class="sourceCode" id="cb221"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb221-1"><a href="the-full-monty-gio-js.html#cb221-1"></a>...</span>
<span id="cb221-2"><a href="the-full-monty-gio-js.html#cb221-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb221-3"><a href="the-full-monty-gio-js.html#cb221-3"></a></span>
<span id="cb221-4"><a href="the-full-monty-gio-js.html#cb221-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb221-5"><a href="the-full-monty-gio-js.html#cb221-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb221-6"><a href="the-full-monty-gio-js.html#cb221-6"></a>  <span class="co">//controller.addData(data);</span></span>
<span id="cb221-7"><a href="the-full-monty-gio-js.html#cb221-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb221-8"><a href="the-full-monty-gio-js.html#cb221-8"></a></span>
<span id="cb221-9"><a href="the-full-monty-gio-js.html#cb221-9"></a><span class="op">}</span></span>
<span id="cb221-10"><a href="the-full-monty-gio-js.html#cb221-10"></a>...</span></code></pre></div>
<p>At this stage the widget should generate a visualisation.</p>
<div class="sourceCode" id="cb222"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb222-1"><a href="the-full-monty-gio-js.html#cb222-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb222-2"><a href="the-full-monty-gio-js.html#cb222-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb222-3"><a href="the-full-monty-gio-js.html#cb222-3"></a><span class="kw">gio</span>(<span class="dt">message =</span> <span class="st">&quot;This required but not used&quot;</span>)</span></code></pre></div>
<div class="figure">
<img src="images/gio-init.png" alt="" />
<p class="caption">Output without data</p>
</div>
<p>Not too shabby!</p>
</div>
<div id="working-with-data" class="section level2 unnumbered" number="">
<h2>Working with Data</h2>
<p>An interesting start, now onto adding data. Let’s take a look at the <a href="https://giojs.org/html/docs/dataAdd.html">documentation</a> to see what data the library expects.</p>
<div class="sourceCode" id="cb223"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb223-1"><a href="the-full-monty-gio-js.html#cb223-1"></a><span class="ot">[</span></span>
<span id="cb223-2"><a href="the-full-monty-gio-js.html#cb223-2"></a>  <span class="fu">{</span></span>
<span id="cb223-3"><a href="the-full-monty-gio-js.html#cb223-3"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb223-4"><a href="the-full-monty-gio-js.html#cb223-4"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;US&quot;</span><span class="fu">,</span></span>
<span id="cb223-5"><a href="the-full-monty-gio-js.html#cb223-5"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">3300000</span></span>
<span id="cb223-6"><a href="the-full-monty-gio-js.html#cb223-6"></a>  <span class="fu">}</span><span class="ot">,</span></span>
<span id="cb223-7"><a href="the-full-monty-gio-js.html#cb223-7"></a>  <span class="fu">{</span></span>
<span id="cb223-8"><a href="the-full-monty-gio-js.html#cb223-8"></a>    <span class="dt">&quot;e&quot;</span><span class="fu">:</span> <span class="st">&quot;CN&quot;</span><span class="fu">,</span></span>
<span id="cb223-9"><a href="the-full-monty-gio-js.html#cb223-9"></a>    <span class="dt">&quot;i&quot;</span><span class="fu">:</span> <span class="st">&quot;RU&quot;</span><span class="fu">,</span></span>
<span id="cb223-10"><a href="the-full-monty-gio-js.html#cb223-10"></a>    <span class="dt">&quot;v&quot;</span><span class="fu">:</span> <span class="dv">10000</span></span>
<span id="cb223-11"><a href="the-full-monty-gio-js.html#cb223-11"></a>  <span class="fu">}</span></span>
<span id="cb223-12"><a href="the-full-monty-gio-js.html#cb223-12"></a><span class="ot">]</span></span></code></pre></div>
<p>The JSON data should constitutes of arrays that denote arcs to draw on the globe where each arc is defined by an exporting country (<code>e</code>), an importing country (<code>i</code>), and is given a value (<code>v</code>). The importing and exporting country, the source and target of the arc, are indicated by ISO alpha-2 country codes. We can read this JSON into R.</p>
<div class="sourceCode" id="cb224"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb224-1"><a href="the-full-monty-gio-js.html#cb224-1"></a><span class="co"># data.frame to test</span></span>
<span id="cb224-2"><a href="the-full-monty-gio-js.html#cb224-2"></a>arcs &lt;-<span class="st"> </span>jsonlite<span class="op">::</span><span class="kw">fromJSON</span>(</span>
<span id="cb224-3"><a href="the-full-monty-gio-js.html#cb224-3"></a>  <span class="st">&#39;[</span></span>
<span id="cb224-4"><a href="the-full-monty-gio-js.html#cb224-4"></a><span class="st">    {</span></span>
<span id="cb224-5"><a href="the-full-monty-gio-js.html#cb224-5"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb224-6"><a href="the-full-monty-gio-js.html#cb224-6"></a><span class="st">      &quot;i&quot;: &quot;US&quot;,</span></span>
<span id="cb224-7"><a href="the-full-monty-gio-js.html#cb224-7"></a><span class="st">      &quot;v&quot;: 3300000</span></span>
<span id="cb224-8"><a href="the-full-monty-gio-js.html#cb224-8"></a><span class="st">    },</span></span>
<span id="cb224-9"><a href="the-full-monty-gio-js.html#cb224-9"></a><span class="st">    {</span></span>
<span id="cb224-10"><a href="the-full-monty-gio-js.html#cb224-10"></a><span class="st">      &quot;e&quot;: &quot;CN&quot;,</span></span>
<span id="cb224-11"><a href="the-full-monty-gio-js.html#cb224-11"></a><span class="st">      &quot;i&quot;: &quot;RU&quot;,</span></span>
<span id="cb224-12"><a href="the-full-monty-gio-js.html#cb224-12"></a><span class="st">      &quot;v&quot;: 10000</span></span>
<span id="cb224-13"><a href="the-full-monty-gio-js.html#cb224-13"></a><span class="st">    }</span></span>
<span id="cb224-14"><a href="the-full-monty-gio-js.html#cb224-14"></a><span class="st">  ]&#39;</span></span>
<span id="cb224-15"><a href="the-full-monty-gio-js.html#cb224-15"></a>)</span>
<span id="cb224-16"><a href="the-full-monty-gio-js.html#cb224-16"></a></span>
<span id="cb224-17"><a href="the-full-monty-gio-js.html#cb224-17"></a><span class="kw">print</span>(arcs)</span></code></pre></div>
<pre><code>##    e  i       v
## 1 CN US 3300000
## 2 CN RU   10000</code></pre>
<p>Jsonlite automagically converts the JSON into a data frame where each row is an arc, which is great as R users tend to prefer rectangular data over lists: this probably what the package should use as input too. Let us make some changes to the <code>gio</code> function so it takes data as input.</p>
<div class="sourceCode" id="cb226"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb226-1"><a href="the-full-monty-gio-js.html#cb226-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb226-2"><a href="the-full-monty-gio-js.html#cb226-2"></a></span>
<span id="cb226-3"><a href="the-full-monty-gio-js.html#cb226-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb226-4"><a href="the-full-monty-gio-js.html#cb226-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb226-5"><a href="the-full-monty-gio-js.html#cb226-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb226-6"><a href="the-full-monty-gio-js.html#cb226-6"></a>  )</span>
<span id="cb226-7"><a href="the-full-monty-gio-js.html#cb226-7"></a></span>
<span id="cb226-8"><a href="the-full-monty-gio-js.html#cb226-8"></a>  <span class="co"># create widget</span></span>
<span id="cb226-9"><a href="the-full-monty-gio-js.html#cb226-9"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb226-10"><a href="the-full-monty-gio-js.html#cb226-10"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb226-11"><a href="the-full-monty-gio-js.html#cb226-11"></a>    x,</span>
<span id="cb226-12"><a href="the-full-monty-gio-js.html#cb226-12"></a>    <span class="dt">width =</span> width,</span>
<span id="cb226-13"><a href="the-full-monty-gio-js.html#cb226-13"></a>    <span class="dt">height =</span> height,</span>
<span id="cb226-14"><a href="the-full-monty-gio-js.html#cb226-14"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb226-15"><a href="the-full-monty-gio-js.html#cb226-15"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb226-16"><a href="the-full-monty-gio-js.html#cb226-16"></a>  )</span>
<span id="cb226-17"><a href="the-full-monty-gio-js.html#cb226-17"></a>}</span></code></pre></div>
<p>Then tiny changes to <code>play.js</code> where we uncomment the line that line previously commented and use <code>x.data</code> passed from R.</p>
<div class="sourceCode" id="cb227"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb227-1"><a href="the-full-monty-gio-js.html#cb227-1"></a>...</span>
<span id="cb227-2"><a href="the-full-monty-gio-js.html#cb227-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb227-3"><a href="the-full-monty-gio-js.html#cb227-3"></a></span>
<span id="cb227-4"><a href="the-full-monty-gio-js.html#cb227-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb227-5"><a href="the-full-monty-gio-js.html#cb227-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb227-6"><a href="the-full-monty-gio-js.html#cb227-6"></a>  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> <span class="co">// uncomment &amp; use x.data</span></span>
<span id="cb227-7"><a href="the-full-monty-gio-js.html#cb227-7"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb227-8"><a href="the-full-monty-gio-js.html#cb227-8"></a></span>
<span id="cb227-9"><a href="the-full-monty-gio-js.html#cb227-9"></a><span class="op">}</span></span>
<span id="cb227-10"><a href="the-full-monty-gio-js.html#cb227-10"></a>...</span></code></pre></div>
<p>We can now use the function with the data to plot arcs!</p>
<div class="sourceCode" id="cb228"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb228-1"><a href="the-full-monty-gio-js.html#cb228-1"></a>devtools<span class="op">::</span><span class="kw">document</span>()</span>
<span id="cb228-2"><a href="the-full-monty-gio-js.html#cb228-2"></a>devtools<span class="op">::</span><span class="kw">load_all</span>()</span>
<span id="cb228-3"><a href="the-full-monty-gio-js.html#cb228-3"></a><span class="kw">gio</span>(arcs)</span></code></pre></div>
<p>Unfortunately, this breaks everything and we are presented with a blank screen. Using <code>console.log</code> or looking at the source code the rendered widget reveals the problem: the data isn’t actually in the correct format!</p>
<div class="sourceCode" id="cb229"><pre class="sourceCode json"><code class="sourceCode json"><span id="cb229-1"><a href="the-full-monty-gio-js.html#cb229-1"></a><span class="fu">{</span><span class="dt">&quot;x&quot;</span><span class="fu">:{</span><span class="dt">&quot;data&quot;</span><span class="fu">:{</span><span class="dt">&quot;e&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;CN&quot;</span><span class="ot">,</span><span class="st">&quot;CN&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;i&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="st">&quot;US&quot;</span><span class="ot">,</span><span class="st">&quot;RU&quot;</span><span class="ot">]</span><span class="fu">,</span><span class="dt">&quot;v&quot;</span><span class="fu">:</span><span class="ot">[</span><span class="dv">3300000</span><span class="ot">,</span><span class="dv">10000</span><span class="ot">]</span><span class="fu">}},</span><span class="dt">&quot;evals&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">,</span><span class="dt">&quot;jsHooks&quot;</span><span class="fu">:</span><span class="ot">[]</span><span class="fu">}</span></span></code></pre></div>
<p>Htmlwidgets actually serialised the data frame column-wise (long) where each array is a column, whereas gio.js expect the data to be wide (row-wise serialisation) where each array is a arc (row).</p>
<div class="sourceCode" id="cb230"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb230-1"><a href="the-full-monty-gio-js.html#cb230-1"></a><span class="co"># column-wise</span></span>
<span id="cb230-2"><a href="the-full-monty-gio-js.html#cb230-2"></a><span class="kw">apply</span>(arcs, <span class="dv">2</span>, as.list)</span></code></pre></div>
<pre><code>## $e
## $e$`1`
## [1] &quot;CN&quot;
## 
## $e$`2`
## [1] &quot;CN&quot;
## 
## 
## $i
## $i$`1`
## [1] &quot;US&quot;
## 
## $i$`2`
## [1] &quot;RU&quot;
## 
## 
## $v
## $v$`1`
## [1] &quot;3300000&quot;
## 
## $v$`2`
## [1] &quot;  10000&quot;</code></pre>
<div class="sourceCode" id="cb232"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb232-1"><a href="the-full-monty-gio-js.html#cb232-1"></a><span class="co"># row-wise</span></span>
<span id="cb232-2"><a href="the-full-monty-gio-js.html#cb232-2"></a><span class="kw">apply</span>(arcs, <span class="dv">1</span>, as.list)</span></code></pre></div>
<pre><code>## $`1`
## $`1`$e
## [1] &quot;CN&quot;
## 
## $`1`$i
## [1] &quot;US&quot;
## 
## $`1`$v
## [1] &quot;3300000&quot;
## 
## 
## $`2`
## $`2`$e
## [1] &quot;CN&quot;
## 
## $`2`$i
## [1] &quot;RU&quot;
## 
## $`2`$v
## [1] &quot;  10000&quot;</code></pre>
<p>As mentioned previously, convention has it that rectangular data (data frames) are serialised row-wise.</p>
</div>
<div id="transforming-data" class="section level2 unnumbered" number="">
<h2>Transforming Data</h2>
<p>There are multiple ways to transform the data and ensure the serialised JSON is as the JavaScript library expects it to be.</p>
<div id="in-javascript" class="section level3 unnumbered" number="">
<h3>In JavaScript</h3>
<p>JavaScript can be used to transform the data, leaving the serialiser as-is to reshape the data in the client. The HTMLwidget JavaScript library (already imported by default) exports an object which provides a method, <code>dataframeToD3</code>, to transform the data from long to wide.</p>
<div class="sourceCode" id="cb234"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb234-1"><a href="the-full-monty-gio-js.html#cb234-1"></a>...</span>
<span id="cb234-2"><a href="the-full-monty-gio-js.html#cb234-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb234-3"><a href="the-full-monty-gio-js.html#cb234-3"></a></span>
<span id="cb234-4"><a href="the-full-monty-gio-js.html#cb234-4"></a>  <span class="co">// long to wide</span></span>
<span id="cb234-5"><a href="the-full-monty-gio-js.html#cb234-5"></a>  <span class="va">x</span>.<span class="at">data</span> <span class="op">=</span> <span class="va">HTMLWidgets</span>.<span class="at">dataframeToD3</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span></span>
<span id="cb234-6"><a href="the-full-monty-gio-js.html#cb234-6"></a></span>
<span id="cb234-7"><a href="the-full-monty-gio-js.html#cb234-7"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb234-8"><a href="the-full-monty-gio-js.html#cb234-8"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb234-9"><a href="the-full-monty-gio-js.html#cb234-9"></a>  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> </span>
<span id="cb234-10"><a href="the-full-monty-gio-js.html#cb234-10"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb234-11"><a href="the-full-monty-gio-js.html#cb234-11"></a></span>
<span id="cb234-12"><a href="the-full-monty-gio-js.html#cb234-12"></a><span class="op">}</span></span>
<span id="cb234-13"><a href="the-full-monty-gio-js.html#cb234-13"></a>...</span></code></pre></div>
</div>
<div id="in-r" class="section level3 unnumbered" number="">
<h3>In R</h3>
<p>Instead of serialising the data a certain way then correct in JavaScript as demonstrated previously, one can also modify, or even replace, htmlwidgets’ default serialiser. Speaking of which, below is the default serializer used by htmlwidgets.</p>
<div class="sourceCode" id="cb235"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb235-1"><a href="the-full-monty-gio-js.html#cb235-1"></a><span class="cf">function</span> (x, ..., <span class="dt">dataframe =</span> <span class="st">&quot;columns&quot;</span>, <span class="dt">null =</span> <span class="st">&quot;null&quot;</span>, <span class="dt">na =</span> <span class="st">&quot;null&quot;</span>, </span>
<span id="cb235-2"><a href="the-full-monty-gio-js.html#cb235-2"></a>  <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>, <span class="dt">digits =</span> <span class="kw">getOption</span>(<span class="st">&quot;shiny.json.digits&quot;</span>, <span class="dv">16</span>), </span>
<span id="cb235-3"><a href="the-full-monty-gio-js.html#cb235-3"></a>  <span class="dt">use_signif =</span> <span class="ot">TRUE</span>, <span class="dt">force =</span> <span class="ot">TRUE</span>, <span class="dt">POSIXt =</span> <span class="st">&quot;ISO8601&quot;</span>, <span class="dt">UTC =</span> <span class="ot">TRUE</span>, </span>
<span id="cb235-4"><a href="the-full-monty-gio-js.html#cb235-4"></a>  <span class="dt">rownames =</span> <span class="ot">FALSE</span>, <span class="dt">keep_vec_names =</span> <span class="ot">TRUE</span>, <span class="dt">strict_atomic =</span> <span class="ot">TRUE</span>) </span>
<span id="cb235-5"><a href="the-full-monty-gio-js.html#cb235-5"></a>{</span>
<span id="cb235-6"><a href="the-full-monty-gio-js.html#cb235-6"></a>  <span class="cf">if</span> (strict_atomic) </span>
<span id="cb235-7"><a href="the-full-monty-gio-js.html#cb235-7"></a>      x &lt;-<span class="st"> </span><span class="kw">I</span>(x)</span>
<span id="cb235-8"><a href="the-full-monty-gio-js.html#cb235-8"></a>  jsonlite<span class="op">::</span><span class="kw">toJSON</span>(x, <span class="dt">dataframe =</span> dataframe, <span class="dt">null =</span> null, <span class="dt">na =</span> na, </span>
<span id="cb235-9"><a href="the-full-monty-gio-js.html#cb235-9"></a>    <span class="dt">auto_unbox =</span> auto_unbox, <span class="dt">digits =</span> digits, <span class="dt">use_signif =</span> use_signif, </span>
<span id="cb235-10"><a href="the-full-monty-gio-js.html#cb235-10"></a>    <span class="dt">force =</span> force, <span class="dt">POSIXt =</span> POSIXt, <span class="dt">UTC =</span> UTC, <span class="dt">rownames =</span> rownames, </span>
<span id="cb235-11"><a href="the-full-monty-gio-js.html#cb235-11"></a>    <span class="dt">keep_vec_names =</span> keep_vec_names, <span class="dt">json_verbatim =</span> <span class="ot">TRUE</span>, ...)</span>
<span id="cb235-12"><a href="the-full-monty-gio-js.html#cb235-12"></a>}</span></code></pre></div>
<p>The problem at hand is caused by the <code>dataframe</code> argument which is set to <code>columns</code> where it should be set <code>rows</code> (for row-wise). Arguments are passed to the serialiser indirectly, in the form of a list set as <code>TOJSON_ARGS</code> attribute to the object <code>x</code> that is serialised. We could thus change the <code>gio</code> function to reflect the aforementioned change.</p>
<div class="sourceCode" id="cb236"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb236-1"><a href="the-full-monty-gio-js.html#cb236-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb236-2"><a href="the-full-monty-gio-js.html#cb236-2"></a></span>
<span id="cb236-3"><a href="the-full-monty-gio-js.html#cb236-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb236-4"><a href="the-full-monty-gio-js.html#cb236-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb236-5"><a href="the-full-monty-gio-js.html#cb236-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb236-6"><a href="the-full-monty-gio-js.html#cb236-6"></a>  )</span>
<span id="cb236-7"><a href="the-full-monty-gio-js.html#cb236-7"></a></span>
<span id="cb236-8"><a href="the-full-monty-gio-js.html#cb236-8"></a>  <span class="co"># serialise data.frames to wide (not long as default)</span></span>
<span id="cb236-9"><a href="the-full-monty-gio-js.html#cb236-9"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_ARGS&#39;</span>) &lt;-<span class="st"> </span><span class="kw">list</span>(<span class="dt">dataframe =</span> <span class="st">&quot;rows&quot;</span>)</span>
<span id="cb236-10"><a href="the-full-monty-gio-js.html#cb236-10"></a></span>
<span id="cb236-11"><a href="the-full-monty-gio-js.html#cb236-11"></a>  <span class="co"># create widget</span></span>
<span id="cb236-12"><a href="the-full-monty-gio-js.html#cb236-12"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb236-13"><a href="the-full-monty-gio-js.html#cb236-13"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb236-14"><a href="the-full-monty-gio-js.html#cb236-14"></a>    x,</span>
<span id="cb236-15"><a href="the-full-monty-gio-js.html#cb236-15"></a>    <span class="dt">width =</span> width,</span>
<span id="cb236-16"><a href="the-full-monty-gio-js.html#cb236-16"></a>    <span class="dt">height =</span> height,</span>
<span id="cb236-17"><a href="the-full-monty-gio-js.html#cb236-17"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb236-18"><a href="the-full-monty-gio-js.html#cb236-18"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb236-19"><a href="the-full-monty-gio-js.html#cb236-19"></a>  )</span>
<span id="cb236-20"><a href="the-full-monty-gio-js.html#cb236-20"></a>}</span></code></pre></div>
<p>The above may appear confusing at first as one rarely encounters the <code>attr</code> replacement function.</p>
<div class="sourceCode" id="cb237"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb237-1"><a href="the-full-monty-gio-js.html#cb237-1"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) &lt;-<span class="st"> &quot;attributes&quot;</span> <span class="co"># set </span></span>
<span id="cb237-2"><a href="the-full-monty-gio-js.html#cb237-2"></a><span class="kw">attr</span>(cars, <span class="st">&quot;hello&quot;</span>) <span class="co"># get </span></span></code></pre></div>
<pre><code>## [1] &quot;attributes&quot;</code></pre>
<p>Otherwise the serializer can also be replaced in its entirety, also by setting an attribute, <code>TOJSON_FUNC</code>, to the <code>x</code> object. Below the serialiser is changed to jsonify <span class="citation">(Cooley <a href="#ref-R-jsonify" role="doc-biblioref">2020</a>)</span> which by default serialises data frames to wide, unlike htmlwidgets’ serialiser, thereby also fixing the issue.</p>
<div class="sourceCode" id="cb239"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb239-1"><a href="the-full-monty-gio-js.html#cb239-1"></a>gio &lt;-<span class="st"> </span><span class="cf">function</span>(data, <span class="dt">width =</span> <span class="ot">NULL</span>, <span class="dt">height =</span> <span class="ot">NULL</span>, <span class="dt">elementId =</span> <span class="ot">NULL</span>) {</span>
<span id="cb239-2"><a href="the-full-monty-gio-js.html#cb239-2"></a></span>
<span id="cb239-3"><a href="the-full-monty-gio-js.html#cb239-3"></a>  <span class="co"># forward options using x</span></span>
<span id="cb239-4"><a href="the-full-monty-gio-js.html#cb239-4"></a>  x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb239-5"><a href="the-full-monty-gio-js.html#cb239-5"></a>    <span class="dt">data =</span> data</span>
<span id="cb239-6"><a href="the-full-monty-gio-js.html#cb239-6"></a>  )</span>
<span id="cb239-7"><a href="the-full-monty-gio-js.html#cb239-7"></a></span>
<span id="cb239-8"><a href="the-full-monty-gio-js.html#cb239-8"></a>  <span class="co"># replace serialiser</span></span>
<span id="cb239-9"><a href="the-full-monty-gio-js.html#cb239-9"></a>  <span class="kw">attr</span>(x, <span class="st">&#39;TOJSON_FUNC&#39;</span>) &lt;-<span class="st"> </span>gio_serialiser</span>
<span id="cb239-10"><a href="the-full-monty-gio-js.html#cb239-10"></a></span>
<span id="cb239-11"><a href="the-full-monty-gio-js.html#cb239-11"></a>  <span class="co"># create widget</span></span>
<span id="cb239-12"><a href="the-full-monty-gio-js.html#cb239-12"></a>  htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</span>
<span id="cb239-13"><a href="the-full-monty-gio-js.html#cb239-13"></a>    <span class="dt">name =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb239-14"><a href="the-full-monty-gio-js.html#cb239-14"></a>    x,</span>
<span id="cb239-15"><a href="the-full-monty-gio-js.html#cb239-15"></a>    <span class="dt">width =</span> width,</span>
<span id="cb239-16"><a href="the-full-monty-gio-js.html#cb239-16"></a>    <span class="dt">height =</span> height,</span>
<span id="cb239-17"><a href="the-full-monty-gio-js.html#cb239-17"></a>    <span class="dt">package =</span> <span class="st">&#39;gio&#39;</span>,</span>
<span id="cb239-18"><a href="the-full-monty-gio-js.html#cb239-18"></a>    <span class="dt">elementId =</span> elementId</span>
<span id="cb239-19"><a href="the-full-monty-gio-js.html#cb239-19"></a>  )</span>
<span id="cb239-20"><a href="the-full-monty-gio-js.html#cb239-20"></a>}</span>
<span id="cb239-21"><a href="the-full-monty-gio-js.html#cb239-21"></a></span>
<span id="cb239-22"><a href="the-full-monty-gio-js.html#cb239-22"></a><span class="co"># serialiser</span></span>
<span id="cb239-23"><a href="the-full-monty-gio-js.html#cb239-23"></a>gio_serialiser &lt;-<span class="st"> </span><span class="cf">function</span>(x){</span>
<span id="cb239-24"><a href="the-full-monty-gio-js.html#cb239-24"></a>  jsonify<span class="op">::</span><span class="kw">to_json</span>(x, <span class="dt">unbox =</span> <span class="ot">TRUE</span>)</span>
<span id="cb239-25"><a href="the-full-monty-gio-js.html#cb239-25"></a>}</span></code></pre></div>
<p>Alternatively, one can also leave all serialisers unchanged and instead format the data in R prior to the serialisation, changing the dataframe to a row-wise list.</p>
<div class="sourceCode" id="cb240"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb240-1"><a href="the-full-monty-gio-js.html#cb240-1"></a>x =<span class="st"> </span><span class="kw">list</span>(</span>
<span id="cb240-2"><a href="the-full-monty-gio-js.html#cb240-2"></a>  <span class="dt">data =</span> <span class="kw">apply</span>(data, <span class="dv">1</span>, as.list)</span>
<span id="cb240-3"><a href="the-full-monty-gio-js.html#cb240-3"></a>)</span></code></pre></div>
</div>
<div id="pros-cons" class="section level3 unnumbered" number="">
<h3>Pros &amp; Cons</h3>
<p>There are pros and cons to each methods. The preferable method is probably to only alter the argument(s) where needed, this is the method used in the remainder of the book. Replacing the serialiser in its entirety should not be necessary, only do this once you are very familiar with serialisation and truly see a need for it. Moreover htmlwidgets’ serialiser extends jsonlite to allow converting JavaScript code which will come in handy later on. Transforming the data in JavaScript has one drawback, <code>HTMLWidgets.dataframeToD3</code> cannot be applied to the entire <code>x</code> object, it will only work on the subsets that hold the column-wise data (<code>x.data</code>) which tends to lead to clunky code as one uses said function in various places.</p>
<div class="figure">
<img src="images/gio-data.png" alt="" />
<p class="caption">Gio output with correct serialisation</p>
</div>
</div>
</div>
<div id="on-print" class="section level2 unnumbered" number="">
<h2>On Print</h2>
<p>Let’s add the option to style the globe, gio.js provides mutliple <a href="https://giojs.org/html/docs/colorStyle.html">themes</a> but they are currently not applicable from R. As a matter of fact, gio.js provides dozens of customisation options that should be available in the package as well. These, however, probably should be split across different functions, just like they are in gio.js, rather than all be accessible from a single function. This begs the question, when would one use another function given the function <code>gio</code> generates the visualisation? As it happens <code>gio</code> itself (or rather the function <code>htmlwidgets::createWidget</code> it contains) does not render the output, it returns an object of class “htmlwidget” which actually renders the visualisation on print (literally <code>htmlwidget.print</code> method).</p>
<div class="sourceCode" id="cb241"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb241-1"><a href="the-full-monty-gio-js.html#cb241-1"></a>g &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs) <span class="co"># nothing renders</span></span>
<span id="cb241-2"><a href="the-full-monty-gio-js.html#cb241-2"></a>g <span class="co"># visualisation renders</span></span></code></pre></div>
<p>Therefore, one can use functions on the object returned by <code>gio</code> which contains, amongst other things, the <code>x</code> list to which we can append make changes, append data, or do any other operation that lists allow.</p>
<div class="sourceCode" id="cb242"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb242-1"><a href="the-full-monty-gio-js.html#cb242-1"></a><span class="kw">print</span>(g<span class="op">$</span>x)</span>
<span id="cb242-2"><a href="the-full-monty-gio-js.html#cb242-2"></a></span>
<span id="cb242-3"><a href="the-full-monty-gio-js.html#cb242-3"></a><span class="co">## $data</span></span>
<span id="cb242-4"><a href="the-full-monty-gio-js.html#cb242-4"></a><span class="co">##    e  i       v</span></span>
<span id="cb242-5"><a href="the-full-monty-gio-js.html#cb242-5"></a><span class="co">## 1 CN US 3300000</span></span>
<span id="cb242-6"><a href="the-full-monty-gio-js.html#cb242-6"></a><span class="co">## 2 CN RU   10000</span></span>
<span id="cb242-7"><a href="the-full-monty-gio-js.html#cb242-7"></a><span class="co">## </span></span>
<span id="cb242-8"><a href="the-full-monty-gio-js.html#cb242-8"></a><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)</span></span>
<span id="cb242-9"><a href="the-full-monty-gio-js.html#cb242-9"></a><span class="co">## attr(,&quot;TOJSON_ARGS&quot;)$dataframe</span></span>
<span id="cb242-10"><a href="the-full-monty-gio-js.html#cb242-10"></a><span class="co">## [1] &quot;rows&quot;</span></span></code></pre></div>
<p>This clarified the function to change the style of the visualisation can be added to the package. It would take as input the output of <code>gio</code> and append the style (name of theme) to the <code>x</code> list, this would then be used in JavaScript to change the look of the visualisation.</p>
<div class="sourceCode" id="cb243"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb243-1"><a href="the-full-monty-gio-js.html#cb243-1"></a><span class="co">#&#39; @export</span></span>
<span id="cb243-2"><a href="the-full-monty-gio-js.html#cb243-2"></a>gio_style &lt;-<span class="st"> </span><span class="cf">function</span>(g, <span class="dt">style =</span> <span class="st">&quot;magic&quot;</span>){</span>
<span id="cb243-3"><a href="the-full-monty-gio-js.html#cb243-3"></a>  g<span class="op">$</span>x<span class="op">$</span>style &lt;-<span class="st"> </span>style</span>
<span id="cb243-4"><a href="the-full-monty-gio-js.html#cb243-4"></a>  <span class="kw">return</span>(g)</span>
<span id="cb243-5"><a href="the-full-monty-gio-js.html#cb243-5"></a>}</span></code></pre></div>
<p>The style is applied using the <code>setStyle</code> method on the controller before the visualisation is created, before the <code>init</code> method is called, using the style passed from R: <code>x.style</code>.</p>
<div class="sourceCode" id="cb244"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb244-1"><a href="the-full-monty-gio-js.html#cb244-1"></a>...</span>
<span id="cb244-2"><a href="the-full-monty-gio-js.html#cb244-2"></a>renderValue<span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></span>
<span id="cb244-3"><a href="the-full-monty-gio-js.html#cb244-3"></a></span>
<span id="cb244-4"><a href="the-full-monty-gio-js.html#cb244-4"></a>  <span class="kw">var</span> container <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="va">el</span>.<span class="at">id</span>)<span class="op">;</span></span>
<span id="cb244-5"><a href="the-full-monty-gio-js.html#cb244-5"></a>  <span class="kw">var</span> controller <span class="op">=</span> <span class="kw">new</span> <span class="va">GIO</span>.<span class="at">Controller</span>(container)<span class="op">;</span></span>
<span id="cb244-6"><a href="the-full-monty-gio-js.html#cb244-6"></a>  <span class="va">controller</span>.<span class="at">addData</span>(<span class="va">x</span>.<span class="at">data</span>)<span class="op">;</span> </span>
<span id="cb244-7"><a href="the-full-monty-gio-js.html#cb244-7"></a></span>
<span id="cb244-8"><a href="the-full-monty-gio-js.html#cb244-8"></a>  <span class="va">controller</span>.<span class="at">setStyle</span>(<span class="va">x</span>.<span class="at">style</span>)<span class="op">;</span> <span class="co">// set style</span></span>
<span id="cb244-9"><a href="the-full-monty-gio-js.html#cb244-9"></a></span>
<span id="cb244-10"><a href="the-full-monty-gio-js.html#cb244-10"></a>  <span class="va">controller</span>.<span class="at">init</span>()<span class="op">;</span></span>
<span id="cb244-11"><a href="the-full-monty-gio-js.html#cb244-11"></a></span>
<span id="cb244-12"><a href="the-full-monty-gio-js.html#cb244-12"></a><span class="op">}</span></span>
<span id="cb244-13"><a href="the-full-monty-gio-js.html#cb244-13"></a>...</span></code></pre></div>
<p>We can now run <code>devtools::load_all</code> to export the newly written function and load the functions in the environment with <code>devtools::load_all</code>.</p>
<div class="sourceCode" id="cb245"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb245-1"><a href="the-full-monty-gio-js.html#cb245-1"></a>g1 &lt;-<span class="st"> </span><span class="kw">gio</span>(arcs)</span>
<span id="cb245-2"><a href="the-full-monty-gio-js.html#cb245-2"></a>g2 &lt;-<span class="st"> </span><span class="kw">gio_style</span>(g1, <span class="st">&quot;juicyCake&quot;</span>)</span>
<span id="cb245-3"><a href="the-full-monty-gio-js.html#cb245-3"></a></span>
<span id="cb245-4"><a href="the-full-monty-gio-js.html#cb245-4"></a>g2</span></code></pre></div>
<div class="figure">
<img src="images/gio-style.png" alt="" />
<p class="caption">Gio with a new style</p>
</div>
<p>This is great but can be greatly improved upon with the magrittr pipe <span class="citation">(Bache and Wickham <a href="#ref-R-magrittr" role="doc-biblioref">2014</a>)</span>, it would allow easily passing the output of each function to the next to obtain an API akin to that of plotly or highcharter.</p>
<div class="sourceCode" id="cb246"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb246-1"><a href="the-full-monty-gio-js.html#cb246-1"></a><span class="kw">library</span>(magrittr)</span>
<span id="cb246-2"><a href="the-full-monty-gio-js.html#cb246-2"></a></span>
<span id="cb246-3"><a href="the-full-monty-gio-js.html#cb246-3"></a><span class="kw">gio</span>(arcs) <span class="op">%&gt;%</span><span class="st"> </span></span>
<span id="cb246-4"><a href="the-full-monty-gio-js.html#cb246-4"></a><span class="st">  </span><span class="kw">gio_style</span>(<span class="st">&quot;juicyCake&quot;</span>)</span></code></pre></div>
<p>The pipe drastically improves the API that gio provides its users and thus probably should be exported by the package; the usethis package provides a function to easily do so.</p>
<div class="sourceCode" id="cb247"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb247-1"><a href="the-full-monty-gio-js.html#cb247-1"></a><span class="co"># export the pipe</span></span>
<span id="cb247-2"><a href="the-full-monty-gio-js.html#cb247-2"></a>usethis<span class="op">::</span><span class="kw">use_pipe</span>()</span></code></pre></div>
<p>This closes this chapter but is not the last we see of gio.js, we shall use it as example in the next chapters as we extend its functionalities, polish certain aspects such as sizing and safety.</p>

</div>
</div>
<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-magrittr">
<p>Bache, Stefan Milton, and Hadley Wickham. 2014. <em>Magrittr: A Forward-Pipe Operator for R</em>. <a href="https://CRAN.R-project.org/package=magrittr">https://CRAN.R-project.org/package=magrittr</a>.</p>
</div>
<div id="ref-R-jsonify">
<p>Cooley, David. 2020. <em>Jsonify: Convert Between ’R’ Objects and Javascript Object Notation (Json)</em>. <a href="https://CRAN.R-project.org/package=jsonify">https://CRAN.R-project.org/package=jsonify</a>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="a-realistic-widget-typed-js.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="advanced-usage.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/lunr.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/r-and-javascript/edit/master/23-htmlwidgets-gio.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
